<template>
  <view>
    <view class="header-common" :style="{paddingTop: (useAppData.titleHeight+12) + 'px'}">
      <view class="back-box" @tap="gotoBack">
        <image class="back-img" src="../../static/icon-back.png"></image>
      </view>
    </view>
    <view class="logo-box">
      <image class="logo-img" src="../../static/logo.png"></image>
      <!-- <p class="title">健康智能伙伴</p> -->
    </view>
    <view class="btn-box">
      <button v-if="state.checked" class="secret-btn" open-type="getPhoneNumber" @getphonenumber="getphonenumber">免密登录</button>
      <button v-else class="authorization" @tap="getphonenumber">免密登录</button>
      <button class="tel-btn" @tap="gotoPage('/pages/login/telLogin', 2)">手机号登录</button>
    </view>
    <view class="xieyi-box">
			<checkbox-group class="radio">
        <Tooltip v-if="state.showTip" class="tooltip"></Tooltip>
				<label @tap="radioChange" class="radio">
          <checkbox style="transform:scale(0.6)" color="#08CB8F" :value="state.checked" :checked="state.checked"/>阅读并同意
          <!-- <radio style="transform:scale(0.7)" color="#08CB8F" :value="state.checked" :checked="state.checked" />阅读并同意 -->
        </label>
        <!-- gotoPage('/pages/agreement/agreement', 1) -->
				<text class="xieyi" @tap="openPrivacyAgreement">《用户隐私协议》</text>
			</checkbox-group>
    </view>
    <!-- <Process></Process> -->
    <!-- <uni-popup ref="alertDialogRef" type="dialog">
      <uni-popup-dialog type="success" cancelText="关闭" confirmText="去填写" content="开始跑步前，需填写个人资料" ></uni-popup-dialog>
    </uni-popup> -->
  </view>
</template>

<script setup>
import { onLaunch, onShow, onHide, onUnload, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import { reactive, ref, onMounted } from 'vue';
import Tooltip from "../components/tooltip"
import Process from "../components/prosess"
import * as API from "../../api/api.js"
import { storeToRefs } from "pinia";
import { userLoginStore } from "../../store/userLogin";
import { useAppStore } from "../../store/app";
import { useShareStore } from "../../store/share";
import {useRunInfoStore} from "@/store/runInfo";
const useShareData = useShareStore()
const useAppData = useAppStore()
const userLoginData = userLoginStore()
const useRunInfoData = useRunInfoStore();

console.log("用户登录", userLoginData)
// const {  } = storeToRefs(userLoginData);
const state = reactive({
  checked: false,
  showTip: false
})

onShareAppMessage((res) => {
    return useShareData.shareInfo
})
onShareTimeline((res) => {
  return useShareData.shareInfo
})
const openPrivacyAgreement = () => {
  // 查看隐私协议
  uni.openPrivacyContract({
    success: () => {console.log("打开成功")}, // 打开成功
    fail: () => {console.log("打开失败")}, // 打开失败
    complete: () => {console.log("完成")}
  })
}

const gotoBack = () => {
  uni.navigateBack()
}

const gotoPage= (url, type) => {
  if (!state.checked && type === 2) {
    state.showTip = true
    return
  }
  uni.navigateTo({
    url
  });
}

const radioChange = () => {
  state.checked = !state.checked
  state.showTip = state.checked ? false : true
}

// 获取解析手机号
const getphonenumber = (e) => {
  if (!state.checked) {
    state.showTip = true
    return
  }
  if (e.detail.errno === 104) {
    uni.showToast({
      title: "你已拒绝过授权，请稍后再登录！",
      icon: "none"
    })
    return
  }
  if (!e.detail.code) return
  uni.login({
    provider: "weixin",
    success: res=>{
      // useRunInfoData.setPopupExpire('')
      userLoginData.getOpenIdLogin(res.code, {
        encryptedData: e.detail.encryptedData,
        iv: e.detail.iv
      })
    },
    fail: err=>{

    }
  })
  // userLoginData.handleWxLogin({
  //   encryptedData: e.detail.encryptedData,
  //   iv: e.detail.iv
  // }, "moblie")
  // userLoginData.getUserPhoneNumber({code: e.detail.code})
}
</script>
<style lang="scss" scoped>
  .logo-box{
    margin-top: 316rpx;
    text-align: center;
    .logo-img{
      width: 140rpx;
      height: 140rpx;
    }
    .title{
      text-align: center;
      margin-top: 28rpx;
      font-weight: 600;
      font-size: 48rpx;
      color: #222222;
    }
  }
  .btn-box{
    margin-top: 150rpx;
    button{
      width: 590rpx;
      height: 92rpx;
      background: #08CB8F;
      // box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(50,181,102,0.58);
      border-radius: 51rpx;
      color: #FFFFFF;
      font-size: 32rpx;
      line-height: 92rpx;
    }
    .secret-btn{

    }
    .tel-btn{
      background: #fff;
      border-radius: 51rpx;
      border: 2rpx solid #08CB8F;
      color: #08CB8F;
      margin-top: 32rpx;
    }
  }
  .xieyi-box{
    font-size: 28rpx;
    color: #222222;
    margin-top: 68rpx;
    text-align:center;
    display: flex;
    justify-content: center;
    aligin-items: center;
    .xieyi{
      color: #08CB8F;
    }
    .radio{
      width: 530rpx;
      position: relative;
      // display: inline-block;
    }
    .tooltip{
      position: absolute;
      left: -56rpx;
      top: -90rpx;
    }
  }
</style>
